<template>
	<view class="page">
		<view class="door">
			<view class="title">请选择您要开的门</view>
			<view class="flex">
				<text class="msg">A栋</text>
				<view class="on">
					<image src="../static/openDoor.png" mode=""></image>
					<text>开门</text>
				</view>
			</view>
			<view class="flex">
				<text class="msg">B栋</text>
				<view class="on">

					<image src="../static/openDoor.png" mode=""></image>
					<text>开门</text>
				</view>
			</view>
			<button class="flex" style="justify-content: center;color: #333;margin-top: 30upx;background-color: #fff;" @click="doclose">取消</button>
		</view>
	</view>
</template>

<script>
	export default {

		props: {
			
		},
		data() {
			return {};
		},
		methods: {
			doclose() {
				this.$emit("comevent", false);
				uni.setTabBarStyle({
					backgroundColor:'white',
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.page {
		z-index: 1 !important;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		.door {
			border-radius: 15upx;
			font-size: 30upx;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			align-items: center;
			padding: 50upx 0;
			width: 650upx;

			.title {
				font-size: 40upx;
				color: #333;
				font-weight: 550;
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 74%;
				margin-top: 20upx;
				border-bottom: solid 1upx #E5E5E5;
				padding: 30upx 0 30upx 0;

				.msg {
					color: black;
				}

				.on {
					image {
						width: 40upx;
						height: 40upx;
					}

					color: #fff;
					background: linear-gradient(90deg, #FBAE3C 0%, #F88F1C 100%);
					border-radius: 12upx;
					width: 200upx;
					height: 70upx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}

			}
		}

	}
</style>
